{% filter jscomp %}
var step1 = document.querySelector('#step-1');
var step2 = document.querySelector('#step-2');
var step3 = document.querySelector('#step-3');
var step4 = document.querySelector('#step-4');
var img1 = document.querySelector('#img-step-1');
var img2 = document.querySelector('#img-step-2');
var img3 = document.querySelector('#img-step-3');
var img4 = document.querySelector('#img-step-4');
var left = document.querySelector('#button-left');
var right = document.querySelector('#button-right');
var step = document.querySelectorAll('.step');
var stepImages = document.querySelectorAll('.step-images');
var active = document.querySelectorAll('.active');

function checkArrow(el) {;
  if (el == step1) {
    left.style.display = 'none';
    right.style.display = 'block';
  }
  else if (el == step4) {
    left.style.display = 'block';
    right.style.display = 'none';
  }
  else {
    left.style.display = 'block';
    right.style.display = 'block';
  }
}

function stepActive(stepId, stepClass) {
  Array.prototype.forEach.call(stepClass, function(e) {
    e.classList.remove('active');
  });
  stepId.classList.add('active');
}

step1.addEventListener('click', function() {
  stepActive(step1, step);
  stepActive(img1, stepImages);
});

step2.addEventListener('click', function() {
  stepActive(step2, step);
  stepActive(img2, stepImages);
});

step3.addEventListener('click', function() {
  stepActive(step3, step);
  stepActive(img3, stepImages);
});

step4.addEventListener('click', function() {
  stepActive(step4, step);
  stepActive(img4, stepImages);
});

left.addEventListener('click', function() {
  var active = document.querySelectorAll('.active');
  if (active[1] == step2) {
    stepActive(step1, step);
    stepActive(img1, stepImages);
  }
  else if (active[1] == step3) {
    stepActive(step2, step);
    stepActive(img2, stepImages);
  }
  else if (active[1] == step4) {
    stepActive(step3, step);
    stepActive(img3, stepImages);
  }
  var active = document.querySelectorAll('.active');
  checkArrow(active[1]);
});

right.addEventListener('click', function() {
  var active = document.querySelectorAll('.active');
  if (active[1] == step1) {
    stepActive(step2, step);
    stepActive(img2, stepImages);
  }
  else if (active[1] == step2) {
    stepActive(step3, step);
    stepActive(img3, stepImages);
  }
  else if (active[1] == step3) {
    stepActive(step4, step);
    stepActive(img4, stepImages);
  }
  var active = document.querySelectorAll('.active');
  checkArrow(active[1]);
});

// Image swap for mobile
if (document.documentElement.clientWidth < 768) {
  for (i = 0, l = stepImages.length; i < l; i++) {
    var x = stepImages[i].getAttribute('data-img-mob');
    stepImages[i].setAttribute('src', x);
  }
}
{% endfilter %}